<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { SYS_REGION_QUERY } from '/@/api/modules/base/sys-region';

interface Emits {
  (e: 'onSelected', regionId: string, regionName: string): void;
}

const emits = defineEmits<Emits>();

const state = reactive<{
  /**
   * 组织结构list
   */
  list: AppSysRegion.Dto[];
  /**
   * 选择的区域
   */
  areaIds: string[];
}>({
  list: [],
  areaIds: [],
});

/**
 * 查询区域
 * @param page 第几页
 * @param pageSize 每页大小
 */
function queryRegionList(page: number = 1, pageSize: number = 1000) {
  SYS_REGION_QUERY({
    comQuery: { page, pageSize },
  }).then((res) => {
    state.list = res.content;
  });
}

onMounted(() => {
  queryRegionList();
});
</script>
<template>
  <nut-cascader
    :poppable="false"
    :visible="true"
    v-model="state.areaIds"
    textKey="name"
    valueKey="id"
    childrenKey="children"
    :options="state.list"
    @change="(activeOrganIds:string[], activeRegions: AppCascaderOrganDto[]) => {
         const name = activeRegions.map((item) => item.text).join('/');
         const id = activeOrganIds[activeRegions.length -1];
        emits('onSelected', id,name);
      }"
  />
</template>
